Skip to content

feat(range): add classes to the range when the value is at the min or max #30932

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
brandyscarney wants to merge 2 commits into
base: feature-8.8
Choose a base branch
from
Open

feat(range): add classes to the range when the value is at the min or max #30932

brandyscarney wants to merge 2 commits into from
+108 −1

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Jan 20, 2026 •
edited
Loading

Issue number: N/A

What is the current behavior?

Range adds classes to the knobs at min and max, but the host element doesn't reflect those states.

What is the new behavior?

  • Adds range-value-min and range-value-max when the value is at the min or max, respectively.
  • Adds a spec test verifying the classes are applied properly.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev build: 8.7.17-dev.11768943212.1b316931

@vercel
Copy link

vercel bot commented Jan 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
ionic-framework Ready Ready Preview, Comment Jan 20, 2026 9:08pm

Request Review

@github-actions github-actions bot added the package: core @ionic/core package label Jan 20, 2026
@brandyscarney brandyscarney marked this pull request as ready for review January 20, 2026 21:24
@brandyscarney brandyscarney requested a review from a team as a code owner January 20, 2026 21:24
@brandyscarney brandyscarney requested a review from ShaneK January 20, 2026 21:24
thetaPC
thetaPC approved these changes Jan 21, 2026
View reviewed changes
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@rdlabo
Copy link
Contributor

rdlabo commented Jan 22, 2026 •
edited
Loading

Great work — thank you for this improvement!

I noticed one potential limitation: since dual-knobs is not reflected in the DOM, using [dualKnobs]="true" makes this approach difficult to use in practice. We may want to think about how dual-knobs should be handled.

Two possible options could be:

  1. Also set a .use-dual-knobs class (this would be the quickest solution).
  2. When dual-knobs is enabled, provide part="knob knob-a" / part="knob knob-b".

ex:

  &:not(.dual-knobs).range-pressed {
    &.range-value-min::part(knob) {}
    &.range-value-max::part(knob) {}
  }

  &.dual-knobs.range-pressed {
    &.range-value-min::part(knob-a) {}
    &.range-value-max::part(knob-b) {}
  }

Either of these would greatly expand how this can be leveraged.

@rdlabo rdlabo mentioned this pull request Jan 22, 2026
Open
@brandyscarney
Copy link
Member Author

brandyscarney commented Jan 26, 2026

Thank you for the feedback @rdlabo! I am actually working on adding knob-a and knob-b parts this week to resolve #29862 and it will also go in the v8.8 release. I will take a look at adding a dual-knobs class too though either on this PR or the one for that feature. I may reach out to you on Discord with a question on how the knobs should act when they switch places. 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@thetaPC thetaPC thetaPC approved these changes

@ShaneK ShaneK Awaiting requested review from ShaneK ShaneK is a code owner automatically assigned from ionic-team/framework

Assignees

No one assigned

Labels

package: core @ionic/core package

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@brandyscarney @rdlabo @thetaPC